<template>
  <div>
    <h2>AAAAAAAAAAAAAA</h2>
    <el-tree
        :data="data"
        :props="defaultProps"
        :default-expand-all=true
        ref="tree"
        node-key="id"
        :check-strictly=true
        :show-checkbox=true
        @node-click="handleNodeClick"></el-tree>

    <button @click="getCheckedKeys">获取选中的节点</button>
  </div>
</template>

<script>
export default {
  name: "TestTree" ,
  data(){
    return {
      data:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods:{
    getCheckedKeys(){
      let keys = this.$refs.tree.getCheckedKeys();
      console.log(keys)
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadMenus() {
      let url = "/permission/loadAllMenus";
      this.$axios.get(url).then((res)=>{
        if (res.data.code == 200){
          this.data = res.data.data ;
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration:1000
          });
        }
      })
    }
  },
  created() {
    this.loadMenus();
  }
}
</script>

<style scoped>

</style>